<template>
  <div class="main">
    <!--        AppToken:{{ token }}-->
    <!--    VuexToken:{{ $store.state.token }}-->
    <!--    UserInfo:{{userInfo}}-->
    <div class="set-icon">
      <div>
        <div class="yqm">邀请码：<span id="copycode">{{
            userInfo.invitationCode ? userInfo.invitationCode : '暂无'
          }}</span></div>
        <div class="copy" @click="copyLink" v-if="userInfo.invitationCode">复制</div>
      </div>
      <img :src="setImg" @click="setting()">
    </div>
    <!--    v-if="isLogin"-->
    <div class="header">
      <!--      <div class="avatar" >-->
      <!-- <div class="avatar" v-if="userInfo.avatar!=='' && userInfo.avatar!==null"
           :style="{backgroundImage:`url(${ userInfo.avatar ? store.state.imgUrl + userInfo.avatar : logo})`}"
           @click="changeInfo"></div> -->
      <!-- <van-image @click="changeInfo" class="avatar" :src="userInfo.avatar ? store.state.imgUrl+userInfo.avatar : logo"
                 round
      /> -->
      <div class="avatar" @click="changeInfo()"
           :style="{backgroundImage: `url(${userInfo.avatar ? store.state.imgUrl+userInfo.avatar : logo})`}">
       </div>
      <!-- <img  v-else :src="logo" @click="changeInfo" class="avatar"/> -->
      <!--      <div  class="avatar" :style="{backgroundImage: logo}" @click="changeInfo"></div>-->
      <!--      </div>-->
      <div class="info">
        <div class="name">{{ userInfo.name }}</div>
        <div class="address">
          <span class="sex" v-if="userInfo.sex"><i style="font-size:15px"
                                                   :class="userInfo.sex ? ( userInfo.sex === '1' ? 'el-icon-male' : 'el-icon-female') : '' "
                                                   :style="userInfo.sex ? (userInfo.sex === '1' ?'color:#3588e5' : 'color:#ff0099') : ''"></i></span>
          <span>ip属地：{{ userInfo.ipProvince ? userInfo.ipProvince : '未知' }}</span>
        </div>
      </div>
      <div class="grzy" @click="gotoPersonal">
        个人主页
      </div>
    </div>
    <!--    <div class="header" v-if="!isLogin">-->
    <!--      <div class="avatar" @click="gotoLogin()">-->
    <!--        <img :src="phone"/>-->
    <!--      </div>-->
    <!--      <div class="info">-->
    <!--        <div class="login">请登录</div>-->
    <!--        <div class="more">立即登录体验更多精彩</div>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="one">
      <div class="one-item-all">
        <div class="one-item" v-for="(item,index) in oneList" :key="index" @click="gotoLink(item)">
          <img :src="item.img">
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="two">
      <div class="two-item-all">
        <div class="two-item" v-for="(item,index) in twoList" :key="index" @click="gotoLink(item)">
          <img :src="item.img">
          <div>
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="three">
      <div class="title">精选服务</div>
      <div class="three-item-all">
        <div class="three-item" v-for="(item,index) in threeList" :key="index" @click="gotoLink(item)">
          <img :src="item.img">
          <div
              :style="{color:item.name=='发票管理'|| item.name=='邀请朋友'?'rgba(204, 204, 204, 1)':'#000000'}">
            {{ item.name }}
          </div>
          <div class="crile" v-if="item.name=='联系客服' && num>0">
            <!--            {{ num }}-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/store'
import {getUserInfo} from '@/api/my';
import {mapState} from "vuex";
import Cookies from "js-cookie";

export default {
  name: "index",
  data() {
    return {
      logo: require("@/assets/tx.png"),
      token: "",
      userInfo: {},
      setImg: require("@/assets/my/set-icon.png"),
      phone: require('@/assets/my/phone.png'),
      store: store,
      isLogin: false,
      oneList: [
        {name: '我的订单', img: require('@/assets/my/order.png'), id: 0},
        {name: '待支付', img: require('@/assets/my/pay.png'), id: 1},
        {name: '待收货', img: require('@/assets/my/dfh.png'), id: 2},
      ],
      twoList: [
        {name: '健康档案', img: require('@/assets/my/jkda.png'), id: 0},
        {name: '亲友管理', img: require('@/assets/my/jkgl.png'), id: 1},
        {name: '我的二维码', img: require('@/assets/my/wdewm.png'), id: 2},
        {name: '设备管理', img: require('@/assets/my/sbgl.png'), id: 3},
      ],
      threeList: [
        {name: '我的收藏', img: require('@/assets/my/wdsc.png')},
        {name: '地址管理', img: require('@/assets/my/dzgl.png')},
        {name: '发票管理', img: require('@/assets/my/fpgl.png')},
        // {name: '联系客服', img: require('@/assets/my/lxkf.png')},
        {name: '邀请朋友', img: require('@/assets/my/yqpy.png')},
        {name: '意见反馈', img: require('@/assets/my/yjfk.png')},
        {name: '检测人管理', img: require('@/assets/my/jcrgl.png')},
      ],
      namelogon:null


    }
  },
  watch: {
    // token: {
    //   async handler(newVal, oldVal) {
    //     // this.$toast(newVal)
    //     // this.one = newVal;
    //     this.userInfo = await this.getUserInfo();
    //     this.$store.dispatch('my/setUserInfo', this.userInfo)
    //   },
    // },
  },
  computed: {
    num() {
      return this.$store.state.chatStore.num
    }
  },
  async mounted() {
    // window["getInfoFromFlutter"] = (info) => {
    //   this.getInfoFromFlutter(info);
    // };
    // this.token = Cookies.get('token');
    console.log("进入了页面我的")
    this.namelogon= this.$loading({
          lock: true,
          text: '拼命加在中..',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
    this.userInfo = await this.getUserInfo()
    this.$store.dispatch('my/setUserInfo', this.userInfo)
  },
  methods: {
    // getInfoFromFlutter(info) {
    //   // 2、解析传过来的值
    //   let data = JSON.parse(info);
    //   if (data.action == "init" && data.param && data.param.token) {
    //     // 3、存储到store里
    //     this.token = data.param.token;
    //     this.$store.commit("SET_TOKEN", data.param.token);
    //   } else {
    //     this.$toast.fail("token获取失败");
    //   }
    // },
    getUserInfo() {
      // this.$toast.success('进入userInfo接口')
      let data = {
        id: '' //别人访问个人主页的时候 需要填写id
      }
      return new Promise((resolve, reject) => {
        getUserInfo(data).then((res) => {
          // this.$toast.success(`${res.data}`)
          this.namelogon
          setTimeout(() => {
            this.namelogon.close();
        }, 1000);
          resolve(res.data)
        })
      })
    },
    copyLink() {
      // const link = this.userInfo.invitationCode; // 要复制的链接
      // console.log(link)
      // 使用Vant的Clipboard组件的copy方法复制链接
      // this.$vant.Clipboard.copy(link)
      //   .then(() => {
      //     this.$toast('链接已复制'); // 复制成功提示
      //   })
      //   .catch(() => {
      //     this.$toast('复制失败'); // 复制失败提示
      //   });
      // let inputNode = document.createElement('input')  // 创建input
      // inputNode.value = link // 赋值给 input 值
      // document.body.appendChild(inputNode) // 插入进去
      // inputNode.select() // 选择对象
      // document.execCommand('Copy') // 原生调用执行浏览器复制命令
      // inputNode.className = 'oInput'
      // inputNode.style.display = 'none' // 隐藏
      // this.$toast.success('复制成功')
      const range = document.createRange();
      range.selectNode(document.getElementById('copycode')); //获取复制内容的 id 选择器
      const selection = window.getSelection();  //创建 selection对象
      if (selection.rangeCount > 0) selection.removeAllRanges(); //如果页面已经有选取了的话，会自动删除这个选区，没有选区的话，会把这个选取加入选区
      selection.addRange(range); //将range对象添加到selection选区当中，会高亮文本块
      document.execCommand('copy'); //复制选中的文字到剪贴板
      selection.removeAllRanges()//删除高亮选区
      this.$toast.success('复制成功')
      selection.removeRange(range)
    },
    changeInfo() {
      this.$router.push(
          {
            path: '/personInfo',
            query: {
              obj: this.userInfo
            }
          }
      )
      let message = {
        action: 'hiddenBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
    },
    gotoLogin() {
      this.isLogin = !this.isLogin
    },
    gotoPersonal() {
      this.$router.push(
          {
            path: '/personalPage',
            query: {}
          }
      )
      let message = {
        action: 'hiddenBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
    },
    setting() {
      this.$router.push(
          {
            path: '/setting',
            query: {}
          }
      )
      let message = {
        action: 'hiddenBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
    },
    gotoLink(item) {
      switch (item.name) {
        case '设备管理':
          let message = {
            action: 'jumpPage',
            param: {
              router:''
            }
          }
          getInfoFromVue.postMessage(JSON.stringify(message))
          break
        case '我的收藏':
          this.$router.push(
              {
                path: '/personalPage',
                query: {active: 2}
              }
          )
          break
        case '我的订单':
          this.$router.push(
              {
                path: '/order',
              }
          )
          break
        case '地址管理':
          this.$router.push(
              {
                path: '/addressManagement',
                query: {}
              }
          )
          break
        case '健康档案':
          this.$router.push(
              {
                path: '/healthRecords',
                query: {}
              }
          )
          break;
        case '亲友管理':
          this.$router.push(
              {
                path: '/familyFriendList'
              }
          )
          break;
        case '我的二维码':
          this.$router.push(
              {
                path: '/myQrcode',
                query: {
                  userInfo: JSON.stringify(this.userInfo)
                }
              }
          )
          break
        case '检测人管理':
          this.$router.push(
              {
                path: '/detectorManagement',
                query: {}
              }
          )
          break
        case '联系客服':
          this.$router.push(
              {
                path: '/chatOffic',
              }
          )
          this.$store.state.chatStore.num = 0
          console.log(this.$store.state.chatStore.num)
          break
        case '意见反馈':
          this.$router.push(
              {
                path: '/freeBack',
                query: {}
              }
          )
          break
        case '待支付':
          this.$router.push({path: '/order', query: {activeTab: '待支付'}})
          break
        case '待收货':
          this.$router.push({path: '/order', query: {activeTab: '待收货'}})
          break
      }
      let message = {
        action: 'hiddenBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
    },
  }
}
</script>

<style scoped lang="less">
.main {
  height: 100vh;
  padding: 15px;
  background-image: url("../../assets/my/bgm.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #EBECED;

  .set-icon {
    //height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 15px;

    > img {
      width: 26px;
      height: 26px;
      margin-left: auto;
    }

    > div {
      display: flex;
      justify-content: center;
      align-items: center;

      .yqm {
        font-size: 17px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 20.27px;
        color: rgba(255, 255, 255, 1);
        text-align: left;
        vertical-align: top;
      }

      .copy {
        display: flex;
        justify-content: center;
        align-items: center;
        //width: 31px;
        //height: 15px;
        opacity: 1;
        border-radius: 3px;
        background: rgba(255, 255, 255, 1);
        font-size: 15px;
        font-weight: 400;
        //line-height: 15px;
        color: rgba(0, 0, 0, 1);
        text-align: center;
        margin-left: 5px;
        padding: 1px;
      }
    }
  }

  .header {
    margin-top: 8px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .avatar {
      background-repeat: no-repeat;
      background-size: 100%;
      width: 75px;
      height: 75px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #fff;
      //background: rgba(0, 0, 0, 0.8);
      //opacity: 1;
      //color: #f0f0f0;
      background-repeat: no-repeat;
        background-position: center;
        background-size: cover;

      > img {
        width: 41px;
        height: 41px;

      }
    }

    .info {
      margin-left: 8px;

      .name {
        // width:100px;
        font-size: 20px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 28.96px;
        color: rgba(255, 255, 255, 1);
        text-align: left;
        vertical-align: top;
      }

      .address {
        font-size: 17px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: rgba(255, 255, 255, 1);
        text-align: left;
        vertical-align: top;
        display: flex;
        align-items: center;

        .sex {
          display: flex;
          align-items: center;
          justify-content: center;
          background: #fff;
          border-radius: 5px;
          height: 20px;
          width: 20px;
          margin-right: 5px;
        }
      }

      .login {
        width: 77px;
        height: 27px;
        opacity: 1;
        border-radius: 13.5px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 26.06px;
        color: rgba(242, 150, 0, 1);
        text-align: center;
        vertical-align: top;
      }

      .more {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 23.17px;
        color: rgba(255, 255, 255, 1);
        text-align: left;
        vertical-align: top;
        margin-top: 5px;
      }
    }

    .grzy {
      margin-left: auto;
      //width: 91px;
      height: 28px;
      opacity: 1;
      border-radius: 6px;
      background: rgba(255, 255, 255, 1);

      font-size: 17px;
      font-weight: 500;
      //letter-spacing: 0px;
      //line-height: 26.06px;
      color: rgba(0, 0, 0, 1);
      //text-align: center;
      //vertical-align: top;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 3px;
    }
  }

  .one {
    margin-top: 30px;
    height: 75px;
    opacity: 1;
    border-radius: 13px;
    background: rgba(255, 255, 255, 1);

    .one-item-all {
      display: flex;
      align-items: center;
      height: 75px;

      .one-item {
        padding: 0px 20px;
        border-right: 1px dashed rgba(128, 128, 128, 1);
        width: calc((100% - 120px) / 3);
        text-align: center;

        > img {
          height: 30px;
          width: 30px;
        }

        > div {
          font-size: 15px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 17.38px;
          color: rgba(0, 0, 0, 1);
          vertical-align: top;
          margin-top: 5px;
        }
      }

      .one-item:nth-of-type(3n + 0) {
        border-right: none;
      }
    }
  }

  .two {
    margin-top: 14px;
    height: 97px;
    opacity: 1;
    border-radius: 13px;
    background: rgba(255, 255, 255, 1);

    .two-item-all {
      display: flex;
      align-items: center;
      height: 97px;

      .two-item {
        //padding: 0px 10px;
        //border-right: 1px dashed rgba(128, 128, 128, 1);
        width: calc((100% - 0px) / 4);
        text-align: center;

        > img {
          height: 48px;
          width: 48px;
        }

        > div {
          font-size: 15px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 17.38px;
          color: rgba(0, 0, 0, 1);
          vertical-align: top;
          margin-top: 5px;
        }
      }
    }
  }

  .three {
    margin-top: 14px;
    height: 240px;
    opacity: 1;
    border-radius: 13px;
    background: rgba(255, 255, 255, 1);

    .title {
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 23.17px;
      color: rgba(56, 56, 56, 1);
      text-align: center;
      vertical-align: top;
      padding: 10px 0px 20px 0px;
    }

    .three-item-all {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-start;

      .crile {
        width: 10px;
        height: 10px;
        background: red;
        border-radius: 50%;
        position: absolute;
        top: 0;
        right: 20px;
      }

      .three-item {
        position: relative;
        padding: 0px 0px 37px;
        //border-right: 1px dashed rgba(128, 128, 128, 1);
        width: calc((100% - 0px) / 4);
        text-align: center;

        > img {
          height: 30px;
          width: 30px;
        }

        > div {
          font-size: 15px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 17.38px;
          color: rgba(0, 0, 0, 1);
          vertical-align: top;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
